<!--
 * @页面名称:移动端头部
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <var-app-bar
    :title="title"
    title-position="center"
    round
    :image="imgUrl"
    image-linear-gradient="to right top, rgba(29, 68, 147, 0.5) 0%, rgba(74, 198, 170, 0.9) 100%"
  >
    <template #left>
      <var-button color="transparent" text-color="#fff" round text @click="onClickLeft">
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>

    <template #right>
      <var-menu placement="bottom-end" offset-x="-26px">
        <var-button color="transparent" text-color="#fff" round text>
          <var-icon name="menu" :size="24" />
        </var-button>
        <template #menu>
          <var-cell :icon="item.icon" ripple v-for="(item, index) in MenusList" :key="index" @click="RouterClick(item)">
            {{ item.text }}
          </var-cell>
        </template>
      </var-menu>
    </template>
  </var-app-bar>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  title: {
    type: String,
    default: () => {
      return "";
    }
  }
});
// 头部图片地址
const imgUrl = new URL("@/assets/images/tree.jpeg", import.meta.url).href;
const router = useRouter();
const showPopover = ref(false);
const MenusList = [
  { text: "目录页", icon: "file-document-outline", id: 1 },
  { text: "扫一扫", icon: "barcode-scan", id: 2 }
];
const emit = defineEmits(["clickLeft"]);
const onClickLeft = () => {
  emit("clickLeft");
};
const RouterClick = (route: any) => {
  switch (route.id) {
    case 1:
      router.push({ name: "catalogTree" });
      break;
    case 2:
      router.push({ name: "QrCodeReader" });
      break;
  }
};
</script>

<style scoped></style>
